import { useRef, useState } from "react";
import { RuleTree } from "@alipay/techui-rule-tree";
import type { FormInstance } from "antd";
import { Form, Input, Select } from "antd";
// import { FormControlRender } from '@alipay/tech-ui';

export default function App() {
  const [value, setValue] = useState({});
  const formRef = useRef<FormInstance>();

  return (
    <div>
      <RuleTree<{ name: string }>
        formRef={formRef}
        onChange={(value) => {
          setValue(value);
        }}
        value={value}
        defaultRelationValue={"||"}
        relationRender={() => {
          // 注意这里一定要是一个标准的表单项，value onChange必须有，外层不能有div等标签嵌套，不然会出现绑定不上的问题
          // 如果你确实需要，也可以用techui中的FormControlRender把props透传一下
          // return (
          //   <FormControlRender>
          //     {
          //       (formItemProps) => {
          //         return (
          //           <div>
          //             <span>prefix</span>
          //             <Select {...formItemProps}>
          //               <Select.Option value="&&">与（&&）</Select.Option>
          //               <Select.Option value="||">或（||）</Select.Option>
          //             </Select>
          //             <span>subffix</span>
          //           </div>
          //         )
          //       }
          //     }
          //   </FormControlRender>
          // )
          return (
            <Select>
              <Select.Option value="&&">与（&&）</Select.Option>
              <Select.Option value="||">或（||）</Select.Option>
            </Select>
          );
        }}
        defaultValue={{
          children: [
            {
              name: "A",
            },
            {
              name: "B",
            },
          ],
        }}
      >
        {(field) => {
          return (
            <Form.Item
              noStyle
              name={[field.name, "name"]}
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
          );
        }}
      </RuleTree>
      <pre>{JSON.stringify(value, null, 2)}</pre>
    </div>
  );
}
